<script setup>
import { reactive } from "vue";
import { useStudentStore } from '@/store/super-manger/studentStore';
import { storeToRefs } from 'pinia';
import { stuRetreatApi } from '@/service/student'
import { showNotifyTip } from '@/utils/showTipMessage'

const studentStore = useStudentStore();
const { isRetreat, sno } = storeToRefs(studentStore);

const form = reactive({
    reason: ''
})

// 确定操作
const submitForm = async() => {
    isRetreat.value = false;
    // 根据学号发送网络请求，修改学生的住宿状态
    const res = await stuRetreatApi(sno.value, form.reason);
    const { code } = res.data;
    if (!code) {    // 表示退宿操作成功
        showNotifyTip('学生退宿成功！');
    }
}

</script>

<template>
  <div class="retreat">
   <!-- 退宿原因 -->
   <el-dialog 
        v-model="isRetreat" 
        title="退宿原因"
        align-center
        :close-on-click-modal="false"
        width="400"
        :show-close="false"
    >
        <el-form 
            :model="form"
            ref="ruleFormRef"
        >
            <el-form-item label="退宿原因" prop="reason">
                <el-input v-model="form.reason" placeholder="请输入退宿原因" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button 
                    type="success" 
                    plain 
                    class="submitBtn" 
                    :disabled="Boolean(!form.reason)"
                    @click="submitForm(ruleFormRef)"
                >提交</el-button>
                <el-button @click="isRetreat = false">取消</el-button>
            </div>
        </template>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>